// 搜索区域公共样式
.search-box {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 24rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

    .search-form {
        .search-item {
            display: flex;
            align-items: center;
            margin-bottom: 20rpx;

            &:last-child {
                margin-bottom: 0;
            }

            .label {
                width: 140rpx;
                font-size: 28rpx;
                color: #606266;
                font-weight: 500;
            }

            input {
                flex: 1;
                height: 72rpx;
                background-color: #f8f9fa;
                border-radius: 8rpx;
                padding: 0 24rpx;
                font-size: 28rpx;
                color: #2c3e50;

                &::placeholder {
                    color: #909399;
                }
            }

            .picker-box {
                flex: 1;
                height: 72rpx;
                background-color: #f8f9fa;
                border-radius: 8rpx;
                padding: 0 24rpx;
                font-size: 28rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;

                text {
                    color: #2c3e50;

                    &.placeholder {
                        color: #909399;
                    }
                }

                .uni-icons {
                    margin-left: 12rpx;
                }
            }
        }
    }

    .btn-group {
        display: flex;
        gap: 20rpx;
        margin-top: 30rpx;
        padding-top: 30rpx;
        border-top: 2rpx solid #f0f0f0;

        .btn {
            flex: 1;
            height: 80rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12rpx;
            font-size: 28rpx;
            border-radius: 8rpx;
            transition: all 0.3s;

            &:active {
                transform: scale(0.98);
                opacity: 0.9;
            }

            &.search-btn {
                background-color: #409eff;
                color: #fff;

                &:active {
                    background-color: #3a8ee6;
                }
            }

            &.reset-btn {
                background-color: #f5f7fa;
                color: #606266;
                border: 2rpx solid #dcdfe6;

                &:active {
                    background-color: #e9e9eb;
                }
            }

            &.add-btn {
                background-color: #67c23a;
                color: #fff;

                &:active {
                    background-color: #5daf34;
                }
            }
        }
    }
}